<template>
  <view class="page ui-form-basic">
    <fui-form ref="formRef" :model="form" class="form-wrapper" labelWidth="200" labelSize="28" labelWeight="bold">
      <fui-form-item label="新密码" prop="newPassword" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入密码" v-model="form.newPassword" size="28" :password="true"></fui-input>
      </fui-form-item>
      <fui-form-item label="确认密码" prop="confirmPassword" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请再次输入密码" v-model="form.confirmPassword" size="28" :password="true"></fui-input>
      </fui-form-item>
      <fui-form-item label="手机号" prop="mobile" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入手机号" v-model="form.mobile" size="28"></fui-input>
      </fui-form-item>
      <fui-form-item label="验证码" prop="code" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入验证码" v-model="form.code" size="28"></fui-input>
        <template v-slot:right>
          <fui-countdown-verify ref="sendCodeRef" width="auto" borderColor="#fff" color="var(--fui-color-link)" @send="onSendCode"></fui-countdown-verify>
        </template>
      </fui-form-item>
    </fui-form>
    <view class="btn-wrapper">
      <fui-button class="ui-btn-primary_plain" text="取消" height="78rpx" radius="8rpx" :margin="['0', '54rpx', '0', '0']" @click="cancel"></fui-button>
      <fui-button text="保存" height="78rpx" radius="8rpx" :margin="['0']" :loading="isLoading" @click="submit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, inject } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useStore } from 'vuex'
import { setTitle } from '@/utils/common'
import userApi from '@/api/user'

const store = useStore()
const modal = inject('$modal')
const tab = inject('$tab')

const optionType = ref('')
onLoad((option) => {
  optionType.value = option.type
  if (optionType.value && optionType.value === 'change') {
    setTitle('修改密码')
  }
})

const formRef = ref(null)
const form = reactive({
  newPassword: '',
  confirmPassword: '',
  mobile: '',
  code: ''
})

const msgCodeRules = [
  {
    name: 'mobile',
    rule: ['required', 'isMobile'],
    msg: ['请输入手机号', '请输入正确的手机号']
  }
]
const rules = [
  {
    name: 'newPassword',
    rule: ['required', 'isEnAndNo', 'minLength:4', 'maxLength:16'],
    msg: ['请输入密码', '密码为英文和数字组合，不超过20个字符', '密码长度为4-16位，请重新输入', '密码长度为4-16位，请重新输入']
  },
  {
    name: 'confirmPassword',
    rule: ['required', 'isSame:newPassword'],
    msg: ['请再次输入密码', '两次输入的密码不相同']
  },
  {
    name: 'mobile',
    rule: ['required', 'isMobile'],
    msg: ['请输入手机号', '请输入正确的手机号']
  },
  {
    name: 'code',
    rule: ['required', 'minLength:4', 'maxLength:6'],
    msg: ['请输入验证码', '手机验证码长度为4-6位，请重新输入', '手机验证码长度为4-6位，请重新输入']
  }
]

const isLoading = ref(false)

// 发送验证码
const sendCodeRef = ref(null)
const onSendCode = async () => {
  const validRes = await formRef.value.validator(form, msgCodeRules)
  if (!validRes.isPassed) {
    sendCodeRef.value && sendCodeRef.value.reset()
    return
  }
  store.dispatch('SendMsgCode', form.mobile).then(() => {
    sendCodeRef.value && sendCodeRef.value.success()
  }).catch(err => {
    sendCodeRef.value && sendCodeRef.value.reset()
    modal.msgError(err.msg)
  })
}

const submit = async () => {
  const validRes = await formRef.value.validator(form, rules)
  if (validRes.isPassed) {
    isLoading.value = true

    const apiUrl = optionType.value === 'change' ? 'resetUserPwd' : 'forgetUserPwd'
    userApi[apiUrl](form).then(res => {
      modal.msg('密码修改成功，请重新登录！')
      setTimeout(() => {
        store.dispatch('LogOut')
      }, 1000)
    }).catch(err => {
      isLoading.value = false
      modal.msgError(err.msg)
    })
  }
}

const cancel = () => {
  tab.navigateBack()
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/form.scss";
</style>
